<template>
  <div>
    <transition
      name="custom-classes-transition"
      enter-active-class="animate__animated animate__tada"
      leave-active-class="animate__animated animate__bounceOutRight"
    >
      <p v-if="show">hello</p>
    </transition>
    <button @click="isShow">显示</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, watchEffect } from "vue";

export default defineComponent({
  setup() {
    const show = ref(true);
    function isShow() {
      show.value = !show.value;
    }
    watchEffect(() => {
      console.log(show.value);
    });
    return { show, isShow };
  },
});
</script>

<style scoped></style>
